<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <base th:href="@{/}"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/theme.css">
    <style>
        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }

        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #222;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .label-type, .label-status, .label-order {
            background-color: #fff;
            color: #f60;
            padding: 5px;
            border: 1px #f60 solid;
        }

        #typeList :not(:first-child) {
            margin-top: 20px;
        }

        .label-text {
            margin: 0 10px;
        }

        .panel {
            border-radius: 0;
        }

        h3.break {
            font-size: 16px;
            display: block;
            white-space: nowrap;
            word-wrap: normal;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        h3.break > a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" th:href="@{/}" style="font-size:32px;">尚筹网-创意产品众筹平台</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse" style="float:right;">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> 张三<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a th:href="@{/auth/member/to/center/page}"><i class="glyphicon glyphicon-scale"></i> 会员中心</a></li>
                                <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                                <li class="divider"></li>
                                <li><a th:href="@{/auth/member/do/loginout}"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<div class="container theme-showcase" role="main">

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li>
                                <a rel="nofollow" th:href="@{/}"><i class="glyphicon glyphicon-home"></i> 众筹首页</a>
                            </li>
                            <li class="active">
                                <a rel="nofollow" href="javascript:;"><i class="glyphicon glyphicon-th-large"></i> 项目总览</a>
                            </li>
                            <li>
                                <a rel="nofollow" th:href="@{/project/agree/protocol/page}"><i class="glyphicon glyphicon-edit"></i> 发起众筹</a>
                            </li>
                            <li>
                                <a rel="nofollow" th:href="@{/auth/member/to/my/crowd/page}"><i class="glyphicon glyphicon-user"></i> 我的众筹</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <ul id="typeList" style="list-style: none;">
                            <li id="typeLi">
                                分类：
                                <span th:class="${#strings.isEmpty(#request.getParameter('typeId')) ? 'label-type active' : 'label-text'}" class="label-type active">全部</span>
                                <span th:class="${#request.getParameter('typeId') == '1' ? 'label-type active' : 'label-text'}" class="label-text" value="1">科技</span>
                                <span th:class="${#request.getParameter('typeId') == '2' ? 'label-type active' : 'label-text'}" class="label-text" value="2">设计</span>
                                <span th:class="${#request.getParameter('typeId') == '3' ? 'label-type active' : 'label-text'}" class="label-text" value="3">公益</span>
                                <span th:class="${#request.getParameter('typeId') == '4' ? 'label-type active' : 'label-text'}" class="label-text" value="4">农业</span>
                                <span th:class="${#request.getParameter('typeId') == '5' ? 'label-type active' : 'label-text'}" class="label-text" value="5">文化</span>
                            </li>
                            <li id="statusLi">
                                状态：
                                <span th:class="${#strings.isEmpty(#request.getParameter('status')) ? 'label-status active' : 'label-text'}" class="label-status actvie">全部</span>
                                <span th:class="${#request.getParameter('status') == '0' ? 'label-status active' : 'label-text'}" class="label-text" value="0">即将开始</span>
                                <span th:class="${#request.getParameter('status') == '1' ? 'label-status active' : 'label-text'}" class="label-text" value="1">众筹中</span>
                                <span th:class="${#request.getParameter('status') == '2' ? 'label-status active' : 'label-text'}" class="label-text" value="2">众筹成功</span>
                            </li>
                            <li id="sortTypeLi">
                                排序：
                                <span th:class="${#strings.isEmpty(#request.getParameter('sortType')) ? 'label-order active' : 'label-text'}" class="label-order actvie">综合排序</span>
                                <span th:class="${#request.getParameter('sortType') == '0' ? 'label-order active' : 'label-text'}" class="label-text" value="0">最新上线</span>
                                <span th:class="${#request.getParameter('sortType') == '1' ? 'label-order active' : 'label-text'}" class="label-text" value="1">金额最多</span>
                                <span th:class="${#request.getParameter('sortType') == '2' ? 'label-order active' : 'label-text'}" class="label-text" value="2">支持最多</span>
                            </li>
                        </ul>
                    </div>
                    <div class="panel-footer" style="height:50px;padding:0;">
                        <div style="float:left;padding:15px;">
                            共 [[${totalCount == null ? 0 : totalCount}]] 个众筹项目
                        </div>
                        <div style="float:right;">
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input id="searchInput" type="text" th:value="${#request.getParameter('searchContent')}"
                                           class="form-control" placeholder="请输入搜索内容">
                                </div>
                                <button id="searchBtn" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container" th:if="${#lists.isEmpty(projectPaginationVOList)}">未加载到任何项目信息</div>
    <th:block th:if="${not #lists.isEmpty(projectPaginationVOList)}">
        <div class="container" th:each="i : ${#numbers.sequence(0, totalCount)}" th:if="${i % 4 == 0}">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="row">
                        <div class="col-md-3" th:each="j : ${#numbers.sequence(i, i + 3)}" th:unless="${j >= totalCount}">
                            <!-- 使用变量projectPaginationVO引用当前元素 -->
                            <th:block th:with="projectPaginationVO=${projectPaginationVOList[j]}">
                                <div class="thumbnail">
                                    <img alt="300x200" th:src="${projectPaginationVO.headerPicturePath}" src="img/product-1.jpg"/>
                                    <div class="caption">
                                        <h3 class="break">
                                            <a th:href="@{/project/get/project/detail/info/__${projectPaginationVO.projectId}__}" href="project.html">
                                                [[${projectPaginationVO.projectName}]]
                                            </a>
                                        </h3>
                                        <p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot" title="目标金额"></i> $[[${projectPaginationVO.targetMoney}]]</div>
                                        <div style="float:right;"><i title="截至日期" class="glyphicon glyphicon-calendar"></i> [[${projectPaginationVO.initiationDate}]]</div>
                                        </p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div class="progress-bar progress-bar-success" role="progressbar"
                                                 th:aria-valuenow="${projectPaginationVO.reachedProgress}" aria-valuenow="40"
                                                 aria-valuemin="0" aria-valuemax="100"
                                                 th:style="|width: ${projectPaginationVO.reachedProgress}%|" style="width: 40%">
                                                <span>[[${projectPaginationVO.reachedProgress}]]% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i class="glyphicon glyphicon-star-empty"></i></span>
                                            <span><i class="glyphicon glyphicon-user" title="支持人数"></i> [[${projectPaginationVO.supporterNum}]]</span>
                                        </div>
                                    </div>
                                </div>
                            </th:block>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </th:block>

    <div class="container" th:if="${totalCount > 0}">
        <div class="row clearfix">
            <div class="col-md-12 column" style="text-align:center">
                <ul class="pagination">
                    <li th:if="${pageNum > 0}">
                        <a rel="nofollow" th:href="@{/project/get/project/pagination/data/{pageNum}(pageNum=${pageNum}-1)}" href="#">上一页</a>
                    </li>
                    <th:block th:with="pageCount=${(totalCount > 12) ? (totalCount / 12) : 1}">
                        <li th:each="page : ${#numbers.sequence(0, pageCount - 1)}">
                            <a rel="nofollow" th:href="@{/project/get/project/pagination/data/__${page}__}" th:text="${page + 1}">1</a>
                        </li>
                    </th:block>
                    <li th:if="${totalCount > 12 and pageNum < totalCount / 12 }">
                        <a rel="nofollow" href="#">下一页</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container" style="margin-top:20px;">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="footer">
                    <div class="footerNav">
                        <a rel="nofollow" href="http://www.atguigu.com">关于我们</a> | <a rel="nofollow" href="http://www.atguigu.com">服务条款</a> | <a rel="nofollow"
                                                                                                                                                 href="http://www.atguigu.com">免责声明</a>
                        | <a rel="nofollow" href="http://www.atguigu.com">网站地图</a> | <a rel="nofollow" href="http://www.atguigu.com">联系我们</a>
                    </div>
                    <div class="copyRight">
                        Copyright ?2010-2014atguigu.com 版权所有
                    </div>
                </div>

            </div>
        </div>
    </div>

</div> <!-- /container -->
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script src="script/back-to-top.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript">
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })

    $(function () {
        let typeId = "[[${#request.getParameter('typeId')}]]";
        let status = "[[${#request.getParameter('status')}]]";
        let sortType = "[[${#request.getParameter('sortType')}]]";
        // 给每个span元素添加点击事件监听器
        $('#typeLi span').click(function () {
            // 将所有span元素的class设置为"label-text"
            $('#typeLi .label-type').removeClass('label-type active').addClass('label-text');
            // 将被点击的span元素的class设置为"label-type active"
            $(this).removeClass('label-text').addClass('label-type active');
            redirectUrl('typeId', $(this).attr('value'));
        });
        $('#statusLi span').click(function () {
            // 将所有span元素的class设置为"label-text"
            $('#statusLi .label-status').removeClass('label-status active').addClass('label-text');
            $(this).removeClass('label-text').addClass('label-status active');
            redirectUrl('status', $(this).attr('value'));
        });
        $('#sortTypeLi span').click(function () {
            // 将所有span元素的class设置为"label-text"
            $('#sortTypeLi .label-order').removeClass('label-order active').addClass('label-text');
            $(this).removeClass('label-text').addClass('label-order active');
            redirectUrl('sortType', $(this).attr('value'));
        });
        $('#searchBtn').click(function () {
            let val = $('#searchInput').val();
            redirectUrl('searchContent', val);
        })
    })

    function redirectUrl(paramName, paramValue) {
        var url = window.location.href;
        paramValue = !!paramValue ? paramValue : '';
        if (url.indexOf(paramName) >= 0) {
            // 原来已经有xxx参数存在，使用replace方法替换参数值
            url = url.replace(new RegExp(paramName + "=\\w*"), paramName + '=' + paramValue);
        } else if (url.indexOf("?") >= 0) {
            // 已经有参数存在，使用&来拼接参数
            url = url + "&" + paramName + "=" + paramValue;
        } else {
            // 没有参数存在，使用?来拼接参数
            url = url + "?" + paramName + "=" + paramValue;
        }
        window.location.href = url;
    }
</script>
</body>
</html>
